<template>
  <div>
    <!-- Search框 -->
    <r-search
      :searchForm="searchForm"
      :searchHandle="searchHandle"
      :searchData="searchData"
    />
    <!-- Add广告 -->
    <r-search :searchHandle="searchHandleAdd" />
    <r-table
      :isSelection="false"
      :isPagination="true"
      :tableData="tableData"
      :tableCols="tableCols"
      :tablePage="tablePage"
      @refresh="init()"
    ></r-table>
    <!-- Edit页面 -->
    <r-form
      :formRules="formRules"
      :formHandle="formHandle"
      :formData="formData"
      :formCols="formCols"
      ref="elForm"
      labelWidth="200px"
      dialogWidth="1000px"
      :isHandle="true"
    />
  </div>
</template>
<script>
export default {
  data() {
    return {
      // 请求分页的Data源
      searchData: {
        name: "",
        type: "",
        status: ""
      },
      // Search框的格式
      searchForm: [
        {
          type: "input",
          prop: "name",
          placeholder: "广告Name",
          width: 150
        },
        {
          type: "select",
          prop: "type",
          placeholder: "广告Type",
          width: 150,
          options: [
            {
              label: "图片",
              value: 1
            },
            {
              label: "视频",
              value: 2
            }
          ]
        },
        // {
        //   type: 'date',
        //   prop: 'adName',
        //   placeholder: 'Update Time',
        //   width: 150
        // },
        {
          type: "select",
          prop: "status",
          placeholder: "EnableStatus",
          width: 150,
          options: [
            {
              label: "Enable",
              value: 1
            },
            {
              label: "Forbidden",
              value: 2
            }
          ]
        }
      ],
      // Add广告的Data源
      searchHandleAdd: [
        {
          label: "Add广告",
          type: "primary",
          plain: true,
          handle: e => this.elFormVisible()
        }
      ],
      // Search框的Data源
      searchHandle: [
        {
          label: "Search",
          type: "success",
          icon: "el-icon-search",
          plain: true,
          handle: e => this.init()
        }
        // {
        // 	label: 'Reset',
        // 	icon: 'el-icon-refresh-right',
        // 	handle: e => this.searchFromReset()
        // }
      ],
      tableData: [],
      // 分页列表
      tableCols: [
        {
          label: "序号",
          prop: "id"
        },
        {
          label: "广告Name",
          prop: "name"
        },
        {
          label: "广告Type",
          prop: "type",
          formatter: e => {
            return e.type == 1 ? "图片" : "视频";
          }
        },
        {
          label: "广告内容",
          prop: "url",
          type: "image"
        },
        {
          label: "播放时长",
          prop: "times"
        },
        // {
        //   label: '播放Frequency',
        //   prop: 'type_des'
        // },
        {
          label: "Remarks信息",
          prop: "remarks"
        },
        {
          label: "Update Time",
          prop: "ctime",
          formatter: e => this.getDeta(new Date(e.ctime).getTime())
        },
        // {
        //     label: '播放设备数量',
        //     prop: 'devCount'
        // },
        {
          label: "EnableStatus",
          type: "switch",
          prop: "status",
          values: [1, 2],
          change: row => this.changeOnline(row)
        },

        {
          label: "Operations",
          type: "button",
          width: 180,
          btnList: [
            {
              label: "Edit",
              type: "primary",
              handle: row => this.elFormDetail(row)
              // isShow: () => this.apis.showBtn(73, this)
            },
            {
              label: "Delete",
              type: "primary",
              handle: row => {
                this.$confirm("确定要Delete吗?", "Hint", {
                  confirmButtonText: "Confirm",
                  cancelButtonText: "Cancel",
                  type: "warning"
                })
                  .then(async () => {
                    var res = await this.apis.advert_del({
                      id: row.id
                    });
                    this.$message({
                      type: "success",
                      message: "DeleteSuccess!"
                    });
                    this.init();
                  })
                  .catch(() => {});
              }
            }
          ]
        }
      ],
      tablePage: { limit: 10, page: 1, total: 0 },
      // Edit 页面的Data源
      formData: {
        name: "",
        type: "",
        times: "",
        url: "",
        remarks: "",
        status: ""
      },
      // Edit 页面的form
      formCols: [
        {
          type: "input",
          label: "广告Name",
          width: 350,
          prop: "name",
          rmblock: true,
          remark: "广告Name只是作为辨别多个广告条目之用，并不显示在广告中"
        },
        // { type: "select", label: "广告Type", width: 350, prop: "type", rmblock: true, remark: '',options:[
        //     {label:'图片',value:'1'},
        //     {label:'视频',value:'2'},
        //   ] },
        {
          type: "upload",
          label: "广告素材",
          width: 200,
          prop: "url",
          remark: "只能上传jpg/png/MP4格式文件",
          rmblock: true,
          success: (res, file) => {
            console.log(res);
            this.$refs.elForm.loading = false;
            this.formData.url = res.fileName;
            this.formData.type = res.fileName.search(/.mp4/i) == -1 ? "1" : "2";
          }
        },
        {
          type: "input",
          label: "播放时间",
          width: 350,
          prop: "times",
          rmblock: false,
          remark: "秒",
          isShow: () => {
            return this.type == 2 ? true : false;
          }
        },
        {
          type: "input",
          label: "Remarks信息",
          multiple: true,
          width: 350,
          prop: "remarks",
          options: []
        },
        {
          type: "select",
          label: "Position",
          width: 350,
          prop: "status",
          options: [{ label: "主屏", value: "1" }]
        }
      ],
      // Add Edit 按钮的提示
      formRules: {
        name: [{ required: true, message: "Please Enter", trigger: "blur" }],
        type: [{ required: true, message: "Please Select", trigger: "blur" }],

        times: [{ required: true, message: "Please Enter", trigger: "blur" }],
        url: [{ required: true, message: "Please Upload", trigger: "blur" }],
        remarks: [{ required: true, message: "Please Enter", trigger: "blur" }],
        status: [{ required: true, message: "Please Select", trigger: "blur" }]
      },
      // Add Edit 按钮 打开页面的 Cancel 与确认按钮
      formHandle: [
        {
          label: "Cancel",
          handle: e => this.elFormVisible()
        },
        {
          label: "Confirm",
          type: "success",
          handle: e => this.elFormSubmit()
        }
      ]
    };
  },
  components: {},
  computed: {},
  mounted() {
    this.init();
  },
  methods: {
    // 拿到分页Data，渲染列表
    async init() {
      let parm = {
        ...this.searchData,
        ...{
          pageNum: this.tablePage.page,
          pageSize: this.tablePage.limit
        }
      };
      let res = await this.apis.advert_list(parm);
      if (res) {
        this.tablePage.total = res.total;
        var list = res.rows || [];
        this.tableData = list;
      }
      // this.getDevList()
    },

    async getDevList() {
      this.formCols[2].options = [];
      let res2 = await this.api.getAdvertList({ devType: 1 });
      if (res2) {
        for (let i = 0; i < res2.data.length; i++) {
          this.formCols[2].options.push({
            value: res2.data[i].equipmentNo,
            name: res2.data[i].name
          });
        }
        this.tableData.map(item => {
          // item.eq = []
          item.equipmentNos = item.equipmentNos.split(",");
          // for (let i = 0; i < item.equipmentNos.length; i++) {
          //     item.eq.push(this.formCols[2].options.filter(it => it.value == item.equipmentNos[i])[0])
          // }
        });
      }
    },
    // Edit按钮页面的启动按钮的方法
    async changeOnline(row) {
      let res = await this.apis.advert_updata({
        id: row.id,
        status: row.status
      });

      this.$message({
        message: "Operations Success",
        type: "success"
      });
    },
    // Add Edit 按钮 打开页面的  确认按钮
    async elFormSubmit(row) {
      this.$refs.elForm.$refs.ruleForm.validate(async valid => {
        if (valid) {
          if (this.formData.id) {
            let res = await this.apis.advert_updata(this.formData);
            if (res) {
              this.init();
              this.elFormVisible();
            }
          } else {
            let res = await this.apis.advert_save(this.formData);
            if (res) {
              this.init();
              this.elFormVisible();
            }
          }
        }
      });
    },
    //点击  Add Edit按钮的方法
    elFormDetail(row) {
      Object.keys(this.formData).forEach(key => {
        this.formData[key] = row[key] + "";
      });
      this.formData.id = row.id;
      this.elFormVisible();
    }
  }
};
</script>
<style scoped lang="scss">
.el-icon-search {
  margin-right: 10px;
}

.Tip {
  margin-left: 20px;
}
</style>
